<template>
  <div class="page vote">
    <div class="list">
      <swiper
        id="swiperBox"
        :options="swiperOption"
        ref="mySwiper"
      >
        <swiper-slide class="swiper-slide">
          <div
            class="listInner clearfix"
            v-for="(item,index) in list"
            :key="index"
          >
            <span>第{{item}}条内容</span>
            <i @click="voteClick(index)">投票</i>
          </div>
        </swiper-slide>
        <div
          class="swiper-scrollbar"
          slot="scrollbar"
        ></div>
      </swiper>
    </div>
    <van-button
      type="primary"
      class="backHome"
      @click="backHome"
    >回到首页</van-button>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'vote',
  data () {
    return {
      list: [], //轮换列表
      swiperOption: {
        notNextTick: true,//notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true
      }
    }
  },
  mounted () {
    for (let i = 0; i <= 40; i++) {
      this.list.push(i);
    }
  },
  created () {
    setTimeout(() => {
      this.swiper.update();
    }, 20);
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    voteClick (index) {
      this.$toast('您已给第' + index + '条内容投票');
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style lang="less" scoped>
.list {
  position: relative;
  width: 100%;
  height: 80%;
  overflow: hidden;
}
.listInner {
  span {
    float: left;
  }
  i {
    float: right;
    margin-right: 5%;
    font-size: 0.36rem;
    font-style: normal;
  }
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  font-size: 0.36rem;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.backHome {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>